<template>

    <div class="column">
      <div class="boxTitle">
          就业类型
      </div>
       <div id="myChart7" style="width:100%;height:100%;display:block;"></div>
    </div>

</template>

<script>
export default {
  name: 'jiuyeleixing',
  data () {
    return {
      
    }
  },
  
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart7'))
var sData = [{
    name: "农村种养殖",
    value: "400"
}, {
    name: "按比例就业",
    value: "530"
}, {
    name: "被动性就业",
    value: "400"
}, {
    name: "个体就业(自主创业)",
    value: "100"
}, {
    name: "公益性岗位就业",
    value: "400"
}, {
    name: "集中就业",
    value: "600"
}, {
    name: "灵活就业",
    value: "100"
}];
// var legendData1 = ["大白", "长大", "杜洛克", "约克猪"]
// var legendData2 = ["二元", "三元", "大长","PIC"]

var legendData = [];

for (var i = 0; i < sData.length; i++) {
    var halfLength = Math.ceil(sData.length / 2);
    var itemName = sData[i].name;
 
        legendData.push(itemName)
   
}
var colorList = ['#0066FF', '#2E2EE6', '#4400CC', '#00AACC', '#9BBF30', '#E60000', '#92368D', '#BF9926'];
        var option = {

  
    tooltip: {
        trigger: 'item',
        borderColor: 'rgba(255,255,255,.3)',
        backgroundColor: 'rgba(13,5,30,.6)',
        borderWidth: 1,
        padding: 5,
        formatter: function(parms) {
            var str ="就业类型</br>" +
                 parms.data.name + parms.data.value + "人</br>" +
                "占比：" + parms.percent + "%";
            return str;
        }
    },
    // legend: [{
       
    //     orient: 'horizontal',
    //     icon: 'square',
    //     left: '0%',
    //     align: 'left',
    //     top: 'bottom',
    //     itemGap: 10,
    //     // bottom:'50%',
    //     textStyle: {
    //         color: '#fff'
    //     },
    //     data: legendData
    // }],
    series: [{
        type: 'pie',
        z: 3,
        center: ['60%', '50%'],
        radius: ['30%', '45%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
                hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                },
                a: {
                    padding: [-30, 15, -20, 15]
                }
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: sData
    }
    
    // , {
    //     name: '第一层环',
    //     type: 'pie',
    //     z: 2,
    //     tooltip: {
    //         show: false
    //     },
    //     center: ['60%', '50%'],
    //     radius: ['35%', '48%'],
    //     hoverAnimation: false,
    //     clockWise: false,
    //     itemStyle: {
    //         normal: {
    //             shadowBlur: 1,
    //             shadowColor: 'rgba(53,139,255,.3)',
    //             color: 'rgba(1,15,80,.95)',
    //         },
    //         emphasis: {
    //             color: 'rgba(1,15,80,.35)',
    //         }
    //     },
    //     label: {
    //             show: true,
    //             position: 'outside',
    //             formatter: '{b}\n\n{d}%',
    //             rich: {
    //                 hr: {
    //                     backgroundColor: 't',
    //                     borderRadius: 3,
    //                     width: 3,
    //                     height: 3,
    //                     padding: [3, 3, 0, -12]
    //                 },
    //                 a: {
    //                     padding: [0, 0, 0, 0]
    //                 },
    //                 b: {
    //                     color:"#fff"
    //                 }
    //             }
    //         },
    //     data: [100]
    // }
    // , {
    //     name: '第二层环',
    //     type: 'pie',
    //     z: 1,
    //     tooltip: {
    //         show: false
    //     },
    //     center: ['60%', '50%'],
    //     radius: ['48%', '66%'],
    //     hoverAnimation: false,
    //     clockWise: false,
    //     itemStyle: {
    //         normal: {
    //             shadowBlur: 1,
    //             shadowColor: 'rgba(53,139,255,.3)',
    //             color: 'rgba(0,15,69,.95)',
    //         },
    //         emphasis: {
    //             color: 'rgba(0,15,69,.25)',
    //         }
    //     },
    //     label: {
    //         show: false
    //     },
    //     data: [100]
    // }
    ]
};

        // 绘制图表
        myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
    
  }
</style>
